<script setup lang="ts">
import type { SysFileVo } from '#/file'
import type { MemberUserUpdateByLogin } from '#/member/memberUser'

const model = $ref<MemberUserUpdateByLogin>({
  avatar: '',
})

// 获取微信用户头像
function onChooseAvatar(e: any) {
  uni.uploadFile({
    url: '/admin-api/system/file/upload/public',
    filePath: e.detail.avatarUrl,
    name: 'file',
    success: (res) => {
      const data = JSON.parse(res.data) as ResultData<SysFileVo>
      model.avatar = data.data.fileUrl
    },
  })
}

function submit() {
  if (!model.name) {
    uni.showToast({
      title: '请填写昵称',
      icon: 'none',
    })
    return;
  }
  useUserStoreHook()
  .updateUserInfo(model)
  .then(()=>{
    uni.reLaunch({
      url: '/pages/index/index',
    })
    uni.showToast({
      title: '登录成功',
      icon: 'success',
      duration: 2000,
    })
  })
}
</script>

<template>
  <view class="initial">
    <view class="main">
      <view class="avatar-container">
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="avatar" :src="model.avatar ?? '/static/images/avatar.png'" />
        </button>
        <view class="icon">
          <wd-icon name="fill-camera" size="18px" />
        </view>
      </view>
      <view class="input">
        <input v-model="model.name" type="text" maxlength="14" placeholder="请输入昵称">
      </view>
      <view class="input">
        <input v-model="model.password" type="password" maxlength="14" placeholder="请输入密码">
      </view>
      <view class="submit">
        <wd-button @click="submit">
          完成设置
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.initial {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  .main {
    margin: 30rpx;
    margin-top: 10%;
    padding: 40rpx;
    background: white;
    border-radius: 10rpx;
    box-shadow: 0 10rpx 10rpx rgba(86, 86, 86, 0.1);
    .avatar-container {
      position: relative;
      display: flex;
      justify-content: center;
      .avatar-wrapper {
        width: 200rpx;
        height: 200rpx;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        .avatar {
          width: 200rpx;
          height: 200rpx;
          object-fit: cover;
        }
      }
      .icon {
        position: absolute;
        height: fit-content;
        z-index: 9;
        bottom: 0;
        right: 40%;
        width: 44rpx;
        height: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(50%);
        background: #1c1b1bcc;
        color: #ffffff;
        border-radius: 50%;
      }
    }
    .input {
      position: relative;
      height: 45px;
      background: rgb(244, 246, 247);
      border-radius: 20px;
      padding: 0 30rpx;
      margin: 40rpx 0;
      input {
        width: 100%;
        height: 100%;
        color: #4f5050;
        font-size: 14px;
      }
    }
    .submit {
      margin-top: 100rpx;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
